<template>
    <div class="scale-box" :style="{
          transform: `scale(${scale}) translate(-50%, -50%)`,
          WebkitTransform: `scale(${scale}) translate(-50%, -50%)`,
          width:width||'1920px',
          height:height||'1080px'
        }">
        <slot></slot>
    </div>
</template>

<script>
export default {
    props:['width','height'],
    data(){
        return{
            scale:null
        }
    },
    mounted(){
        window.addEventListener('resize', this.setScale,false)
        this.setScale()
    },
    beforeDestroy(){
        window.removeEventListener('resize', this.setScale)
    },
    methods:{
        debounce(fn, delay) {
            let delays = delay || 500;
            let timer;
                let th = this;
                let args = arguments;
                if (timer) {
                clearTimeout(timer);
                }
                timer = setTimeout(function () {
                timer = null;
                fn.apply(th, args);
                }, delays);
        },
        getScale(){
            let width = this.width||1920
            let height = this.height || 1080
            let ww = window.innerWidth / width
            let wh = window.innerHeight / height
            return ww < wh ? ww : wh
        },
        setScale(){
            let _this = this
            this.debounce(() => {
                _this.scale = _this.getScale()
            })
        }
    }
        
}
</script>

<style>
.scale-box{
  display: flex;
  flex-direction: column;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  z-index: 999;
}
</style>